﻿@{
  Layout = "~/Views/Shared/_ContentPage.cshtml";
}

@section leftnav {
  @Html.Partial("~/Views/GetInvolved/LeftNav.cshtml")
}

<script type="text/javascript" src="//worldwidetelescope.org/scripts/wwtsdk.aspx"></script>
<script src="@Model.JsDir/controls/WebControl.js?v=@Model.ResVer"></script>
<script src="@Model.JsDir/controls/TourPlayer.js?v=@Model.ResVer"></script>
<script src="@Model.JsDir/controls/move.js?v=@Model.ResVer"></script>
<script src="@Model.JsDir/controls/pinch.js?v=@Model.ResVer"></script>
<script src="@Model.JsDir/controls/util.js?v=@Model.ResVer"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script src="@Model.JsDir/controls/WCSService.js?v=@Model.ResVer"></script>
<script src="@Model.JsDir/pages/ImportImage.js?v=@Model.ResVer"></script>

<script>
  $(window).on('load', function() { wwt.ImportImage.init('@Model.ResLoc'); });
</script>

<section>
  <h1>Import an image into WorldWide Telescope</h1>

  <div id="txtIntro">
    <p>Import astronomical images into WorldWide Telescope using the WWT Web
    Control or the within the WWT Windows application. </p>

    <p>Enter the image URL below (image must hosted and tagged
    with <a href="http://virtualastronomy.org/avm_metadata.php"
    target="avm">AVM standards</a>).</p>

    <div class="input-group">
      <input type="text" class="form-control" placeholder="Image Url" id="txtImportImage">

      <a class="input-group-addon" href="javascript:void(0)" id="btnImportImage"
         data-toggle="tooltip" data-original-title="If this image is tagged with AVM data, import now. (Press enter)">
	<i class="fa fa-arrow-down"></i>
      </a>

      <a class="input-group-addon" href="javascript:void(0)" id="btnEditImageCoordinates"
         data-toggle="tooltip" data-original-title="Manually enter AVM data for this image...">
	<i class="fa fa-edit"></i>
      </a>
    </div>

    <div style="margin:16px auto" id="divProgress" class="hide">
      Loading image...
      <div class="progress progress-striped active" style="margin:8px 0;">
	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
      </div>
    </div>
  </div>

  <!-- Modal -->

  <div class="modal fade" id="AVMDataModal" tabindex="-1" role="dialog" aria-labelledby="AVMDataModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
	<div class="modal-header">
	  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	  <h4 class="modal-title" id="AVMDataModalLabel">Enter AVM Image Data</h4>
	</div>

	<div class="modal-body">
	  <div id="astrometrySuccess">
	    <p>Astrometry.net has resolved your image. Click Save and Import
	    to view in the Web control.</p>
	  </div>

	  <div id="astrometryFail">
	    <p>Astrometry.net could not resolve your
	    image. <a id="retryAstrometry"
	    href="javascript:void(0)">Retry</a>.</p>
	  </div>

	  <div id="notFoundInfo">
	    <p>
	      <button type="button" style="margin-left:16px" class="btn btn-info pull-right" id="btnAstrometryWCS">
		Solve with Astrometry.net
		<i class="fa fa-arrow-right"></i>
	      </button>

	      <span id="wcNotfound">AVM data not found.</span> You may try to
	      resolve the image position using
	      the <a href="http://astrometry.net/"
	      target="astrometry">astrometry.net</a> service.
	    </p>

	    <p>Or</p>

	    <p>If you know the positioning data for your image, enter it below.</p>
	  </div>

	  <div id="astrometryStatus">
	    <p>Resolving image position using astrometry.net. This may take a
	      few minutes.</p>

	    <p><strong>Status:</strong> <span id="astrometryStatusText"></span></p>

	    <div class="progress progress-striped active" style="margin:8px 0;">
	      <div class="progress-bar progress-bar-info" role="progressbar"
                   aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
	    </div>
	  </div>

	  <div id="WCSForm">
	    <div class="form-group">
	      <div class="col-sm-6">
		<div><strong>RA</strong></div>
		<input data-param="ra"
		       type="number" class="form-control" id="txtRA"
		       placeholder="RA (center)" data-toggle="tooltip"
		       data-original-title="Enter the right ascension center point coordinate" />
	      </div>

	      <div class="col-sm-6">
		<div><strong>Dec</strong></div>
		<input data-param="dec"
		       type="number" class="form-control" id="txtDec"
		       placeholder="Dec (center)" data-toggle="tooltip"
		       data-original-title="Enter the declination center point coordinate" />
	      </div>

	      <div class="clearfix"></div>
	    </div>

	    <div class="form-group">
	      <div class="col-sm-6">
		<div><strong>Scale</strong></div>
		<input data-param="scale"
		       type="number" class="form-control" id="txtScale"
		       placeholder="Scale (deg)" data-toggle="tooltip"
		       data-original-title="Enter the image pixel scale in degrees per pixel" />
	      </div>

	      <div class="col-sm-6">
		<div><strong>Rotation</strong></div>
		<input data-param="rotation"
		       type="number" class="form-control" id="txtRotation"
		       placeholder="Rotation (deg)" data-toggle="tooltip"
		       data-original-title="Enter the degress of rotation off north" />
	      </div>

	      <div class="clearfix"></div>
	    </div>

	    <div class="form-group">
	      <div class="col-sm-12">
		<label data-toggle="tooltip" style="margin:6px 0 0 -2px" data-original-title="Flip the image left to right.">
		  <input type="checkbox" id="chkReverse" data-param="reverseParity" />
		  Reverse Parity
		</label>
	      </div>

	      <div class="clearfix"></div>
	    </div>

	    <div class="form-group">
	      <div class="col-sm-12">
		<div><strong>Thumbnail</strong></div>
		<input data-param="thumb"
		       type="url" class="form-control" id="txtThumb"
		       placeholder="Thumbnail Location (optional)" data-toggle="tooltip"
		       data-original-title="Enter the Url where the image thumbnail is located" />
	      </div>

	      <div class="clearfix"></div>
	    </div>

	    <div class="form-group">
	      <div class="col-sm-12">
		<div><strong>Credits Url</strong></div>
		<input data-param="creditsUrl"
		       type="number" class="form-control" id="txtCreditsUrl"
		       placeholder="Credits Url (optional)" data-toggle="tooltip"
		       data-original-title="Enter the Url to a page describing the collections of the data, team, press release, credits, etc." />
	      </div>

	      <div class="clearfix"></div>
	    </div>

	    <div class="form-group">
	      <div class="col-sm-12">
		<div><strong>Credits</strong></div>
		<textarea data-param="credits"
			  class="form-control" id="txtCredits"
			  placeholder="Credits (optional)" data-toggle="tooltip"
			  data-original-title="Enter text describing credits and copyright"></textarea>
	      </div>

	      <div class="clearfix"></div>
	    </div>
	  </div>
	</div>

	<div class="modal-footer">
	  <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
	  <button type="button" class="btn btn-info" data-dismiss="modal" id="btnSaveAVMData">
	    Save and Import
	    <i class="fa fa-arrow-right"></i>
	  </button>
	</div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <div id="WorldWideTelescopeControlHost">
    <div id="UI" class="hide"></div>
    <div id="WWTCanvas"></div>
    <div class="player-controls">

      <a href="javascript:void(0)" class="btn btn-info fs btn-sm" title="View Full Screen">
	<i class="fa fa-arrows-alt"></i>
      </a>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <h3>AVM Resources:</h3>
      <ul>
	<li><a href="http://www.virtualastronomy.org/avm_metadata.php" target="_blank">VAMP</a></li>
	<li><a href="http://astropix.ipac.caltech.edu/" target="_blank">Astropix Home Page</a></li>
	<li><a href="http://astropix.ipac.caltech.edu/link/5c" target="_blank">Astropix Image Browser</a></li>
      </ul>
    </div>
  </div>

  <div id="divOpenInWWT" class="row hide">
    <div class="col-md-3">
      <a class="btn btn-info" href="javascript:void(0)">
	Open In WWT
	<i class="fa fa-external-link"></i>
      </a>
    </div>

    <div class="col-md-6">
      <strong>Image Crossfade</strong>
      <div style="width:200px">
	<div class="cross-fader">
	  <a class="slider-bar btn btn-small btn-info">&nbsp;</a>
	</div>
      </div>
    </div>
  </div>

  <div class="hide">
    <h4>JSON (debug)</h4>
    <pre></pre>
  </div>
</section>
